<template>
  <div class="spu_wrapper">
    <el-space fill>
      <Category
        ref="category"
        @resetTable="resetTable"
        @handleChangeC3="handleChangeC3"
      />
      <el-card class="spu_card_table common_card_wrapper">
        <!-- 展示属性table  :disabled="isDisabled"  -->
        <el-button
          type="primary"
          icon="Plus"
          style="margin-bottom: 20px"
          @click="addSpu"
        >
          添加SPU
        </el-button>
        <el-table
          :data="tableData"
          :border="true"
          v-loading="loading"
          element-loading-text="加载中..."
          height="650px"
        >
          <el-table-column
            type="index"
            label="序号"
            width="100"
            align="center"
          />
          <el-table-column prop="spuName" label="SPU名称" width="300" />
          <el-table-column
            prop="description"
            label="SPU描述"
            :show-overflow-tooltip="true"
          />
          <el-table-column prop="action" label="操作" width="250">
            <template #default="{ row }">
              <el-tooltip
                class="box-item"
                effect="dark"
                content="添加SKU"
                placement="bottom"
              >
                <el-button
                  type="primary"
                  icon="plus"
                  @click="addSku(row)"
                ></el-button>
              </el-tooltip>
              <el-tooltip
                class="box-item"
                effect="dark"
                content="编辑SPU"
                placement="bottom"
              >
                <el-button
                  type="success"
                  icon="edit"
                  @click="editSpu(row)"
                ></el-button>
              </el-tooltip>
              <el-tooltip
                class="box-item"
                effect="dark"
                content="查看SKU"
                placement="bottom"
              >
                <el-button
                  type="warning"
                  icon="view"
                  @click="checkSpu(row)"
                ></el-button>
              </el-tooltip>
              <el-tooltip
                class="box-item"
                effect="dark"
                content="删除SPU"
                placement="bottom"
              >
                <el-button
                  type="danger"
                  icon="delete"
                  @click="delSpu(row)"
                ></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="common_pagination"
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[30, 50, 100]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="prev, pager, next, jumper,->,total, sizes"
          :total="total"
          @size-change="sizeChange"
          @current-change="getSpuList"
        />
      </el-card>
    </el-space>

    <!-- 添加SPU -->
    <SpuForm
      v-if="scene === 'spu'"
      :visible="drawerSpuVisible"
      :title="drawerTitle"
      :spuId="spuId"
      :category3Id="category3Id"
      :data="spuData"
      @success="successCb"
      @closeDrawer="closeDrawer"
    />
    <!-- 添加SKU -->
    <SkuForm
      :visible="drawerSkuVisible"
      :title="drawerTitle"
      :data="spuData"
      :objId="objId"
      @success="skuCb"
      @closeDrawer="closeSkuDrawer"
    />
    <!-- SKU列表 -->
    <SkuModal v-if="dialogVisible" :spuId="spuId" @close="closeDialog" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { reqSpuList, delSpuReq } from '@/api/product/spu'
import { ElMessage, ElMessageBox } from 'element-plus'
import SpuForm from './components/spuForm.vue'
import SkuForm from './components/skuForm.vue'
import SkuModal from './components/skuModal.vue'
import '@/styles/product/attr.less'
import '@/styles/common/index.less'

let category = ref()
let isDisabled = ref(true)
let tableData = ref<any>([])
let category3Id: any = ''
let drawerSpuVisible = ref(false)
let drawerSkuVisible = ref(false)
let drawerTitle = ref('添加SPU')
const currentPage = ref(1)
const pageSize = ref(30)
const small = ref(false)
const background = ref(true)
const disabled = ref(false)
let total = ref(0)
let loading = ref(false)
let scene = ref('')
let spuData = ref({})
let spuId = ref('')
let objId = ref<any>({
  c1: '',
  c2: ''
})
let dialogVisible = ref(false)

// 一/二级分类回调
const resetTable = (value: any) => {
  tableData.value = []
}

// 三级分类回调
const handleChangeC3 = (
  data: any,
  c1: number | string,
  c2: number | string,
  c3: number | string
) => {
  category3Id = c3
  objId.value.c1 = c1
  objId.value.c2 = c2
  isDisabled.value = c3 ? false : true
  getSpuList()
}

// 获取列表数据
const getSpuList = async (pager = 1) => {
  if (!category3Id) return
  currentPage.value = pager
  loading.value = true
  let res: any = await reqSpuList(
    currentPage.value,
    pageSize.value,
    category3Id
  )
  if (res.code === 200) {
    tableData.value = res.data.records
    total.value = res.data.total
    loading.value = false
  } else {
    ElMessage.error(res.message)
    loading.value = false
  }
}

// 分页器 自定义条数方法
const sizeChange = () => {
  getSpuList()
}

// 添加SPU
const addSpu = () => {
  scene.value = 'spu'
  spuId.value = ''
  drawerTitle.value = '添加SPU'
  drawerSpuVisible.value = true
}

// 编辑SPU
const editSpu = (data: any) => {
  scene.value = 'spu'
  drawerTitle.value = '编辑SPU'
  spuId.value = data.id
  spuData.value = data
  drawerSpuVisible.value = true
}

// 添加SKU
const addSku = (data: any) => {
  scene.value = 'sku'
  drawerTitle.value = '添加SKU'
  spuId.value = data.id
  spuData.value = data
  drawerSkuVisible.value = true
}

//删除方法
const delSpuMethod = async (id: any) => {
  let res: any = await delSpuReq(id)
  if (res.code === 200) {
    ElMessage.success(res.message)
    getSpuList(
      tableData.value.length > 1 ? currentPage.value : currentPage.value - 1
    )
  } else {
    ElMessage.error(res.data ? res.data : res.message)
  }
}

// 删除属性
const delSpu = (data: any) => {
  ElMessageBox.confirm(`确定删除${data.spuName}吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    delSpuMethod(data.id)
  })
}

// 查看SKU
const checkSpu = (data: any) => {
  spuId.value = data.id
  dialogVisible.value = true
}

// drawer spu 成功回调
const successCb = (isAdd: boolean) => {
  drawerSpuVisible.value = false
  isAdd ? getSpuList() : getSpuList(currentPage.value)
}

// drawer spu 关闭回调
const closeDrawer = (value: boolean) => {
  drawerSpuVisible.value = value
}

// drawer sku 成功回调
const skuCb = (value: boolean) => {
  drawerSkuVisible.value = value
}

// drawer sku 关闭回调
const closeSkuDrawer = (value: boolean) => {
  drawerSkuVisible.value = value
}

// dialog sku 关闭回调
const closeDialog = (value: boolean) => {
  dialogVisible.value = value
}
</script>

<style scoped></style>
